<script lang="ts">
import { useEventListener } from '@peng_kai/kit/libs/vueuse';
import { useLoadGameElement } from '~/pages/play/self/helpers';
import DetailSkeleton from './DetailSkeleton.vue';
</script>

<script setup lang="ts">
const props = defineProps<{
  gameCode: string;
  orderNo: string;
}>();
const emits = defineEmits<{
  close: [];
}>();

const router = useRouter();
const gameCode = toRef(props, 'gameCode');
const { GameElement, gameElementRef, displayLoading, gameElementPresetProps } = useLoadGameElement(gameCode, 'record-detail');

useEventListener(gameElementRef, 'shareGameRecord', (ev: any) => {
  const isValid = ev.detail[0].gameCode && ev.detail[0].orderNo;
  isValid && globalPopups.orderShare.open(ev.detail[0]);
});
useEventListener(gameElementRef, 'toPlay', (ev: any) => {
  const isValid = ev.detail[0].code;

  if (isValid) {
    router.push(`/play/${ev.detail[0].code}`);
    emits('close');
  }
});
</script>

<template>
  <div class="relative overflow-hidden bg-sys-layer-d shadow-lg">
    <!-- 这个叉用于遮挡住iframe中的叉 -->
    <div
      class="absolute right-[11px] top-[13px] z-9 size-8 flex cursor-pointer items-center justify-center"
      @click="emits('close')"
    >
      <i v-if="displayLoading" class="i-ri:close-line text-6 text-sys-text-body" />
    </div>

    <component
      :is="GameElement"
      v-if="GameElement"
      v-bind="gameElementPresetProps"
      :class="{ hidden: displayLoading }"
      :orderNo="props.orderNo"
    />
    <DetailSkeleton v-if="displayLoading" class="m-5 mt-12" />
  </div>
</template>
